<template>
    <div>
        <!-- 表头 -->
        <div class="Head" v-if="Head">
            <!-- 仓库名称 -->
            <div class="Cusname">
                <span style="margin-right: 10px">货品编码</span>
                <span>
                    <el-input v-model="adi.number" placeholder="请输入货品编码"></el-input>
                </span>
            </div>
            <!-- 货架名称 -->
            <div class="Cusname">
                <span style="margin-right: 10px">货品名称</span>
                <span>
                    <el-input v-model="adi.name" placeholder="请输入货品名称"></el-input>
                </span>
            </div>
            <!-- 所属客户 -->
            <div class="Cusname">
                <span style="margin-right: 10px">所属客户</span>
                <span>
                    <el-input v-model="adi.belongName" placeholder="请输入归属仓储客户" :disabled="true">
                        <el-button slot="append" @click="dialogTableVisible = true">选择</el-button>
                    </el-input>
                </span>
            </div>
            <!-- 客户类别 -->
            <div class="Cusgory">
                <span style="margin-right: 10px">所属仓库</span>
                <el-select v-model="adi.wId" placeholder="用户状态" style="margin-top: 10px">
                    <el-option v-for="item in ck" :key="item.wId" :label="item.name" :value="item.wId"></el-option>
                </el-select>
            </div>
            <!-- 搜索，重置按钮 -->
        </div>
        <div class="But" v-if="Head">
            <el-button type="primary" icon="el-icon-search" @click="serch">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="Reset()">重置</el-button>
        </div>
        <!-- 表 -->
        <div class="function" style="margin-top: 20px">
            <el-button type="primary" icon="el-icon-plus" plain @click="addLists">新增</el-button>
            <el-button type="info" icon="el-icon-upload2">导入</el-button>
            <el-button type="warning" icon="el-icon-download" plain>导出</el-button>
            <div style="float: right">
                <el-tooltip class="item" effect="dark" content="隐藏搜索" placement="top">
                    <el-button icon="el-icon-search" circle @click="Display"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="刷新" placement="top">
                    <el-button icon="el-icon-refresh" circle @click="Reset"></el-button>
                </el-tooltip>
            </div>
        </div>
        <el-table :data="tableData" class="content" :cell-style="rowClass" :header-cell-style="headClass">
             <el-table-column label="序号" type="index" :index="indexMethod"></el-table-column>
            <el-table-column prop="number" label="货品编码"></el-table-column>
            <el-table-column prop="name" label="货品名称"></el-table-column>
            <el-table-column prop="sku" label="sku"></el-table-column>
            <el-table-column prop="ename" label="英文名称"></el-table-column>
            <el-table-column prop="belongName" label="所属客户"></el-table-column>
            <el-table-column prop="stock" label="库存数量"></el-table-column>
            <el-table-column prop="newCategory" label="货品类别"></el-table-column>
            <el-table-column prop="code" label="条形码"></el-table-column>
            <el-table-column prop="brand" label="品牌"></el-table-column>
            <el-table-column prop="spec" label="商品规格"></el-table-column>
            <el-table-column prop="validity" label="保质期"></el-table-column>
            <el-table-column prop="pic1" label="图片1">
                <template slot-scope="scope">
                    <div v-viewer>
                        <el-image :src="scope.row.pic1" width="50px" height="50px">
                            <div slot="error" class="image-slot">暂无图片</div>
                        </el-image>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="pic2" label="图片2">
                <template slot-scope="scope">
                    <div v-viewer>
                        <el-image :src="scope.row.pic2" width="50px" height="50px">
                            <div slot="error" class="image-slot">暂无图片</div>
                        </el-image>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="liquid" label="是否为液体">
                <template slot-scope="scope">
                    {{ scope.row.liquid == 0 ? '否' : '是' }}
                </template>
            </el-table-column>
            <el-table-column prop="powder" label="是否为粉末">
                <template slot-scope="scope">
                    {{ scope.row.powder == 0 ? '否' : '是' }}
                </template>
            </el-table-column>
            <el-table-column prop="overweight" label="是否超重">
                <template slot-scope="scope">
                    {{ scope.row.overweight == 0 ? '否' : '是' }}
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注1"></el-table-column>
            <el-table-column prop="remark2" label="备注2"></el-table-column>
            <el-table-column fixed="right" label="操作" width="150px">
                <template slot-scope="scope">
                    <el-button type="text" size="small" class="el-icon-edit" @click="update(scope.row)">修改</el-button>
                    <el-button type="text" size="small" class="el-icon-delete" @click="Deldeli(scope.row.pId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination
                background
                style="float: right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNum"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
            <!-- 添加内框 -->
            <el-dialog class="size" title="归属仓储客户选择" :visible.sync="dialogTableVisible">
                <el-table :data="tableDatas" class="biop">
                    <el-table-column prop="name" label="名称" width="130"></el-table-column>
                    <el-table-column prop="address" label="地址" width="150"></el-table-column>
                    <el-table-column prop="address" label="联系人" width="130"></el-table-column>
                    <el-table-column prop="phone" label="电话" width="130"></el-table-column>
                    <el-table-column prop="fax" label="传真" width="130"></el-table-column>
                    <el-table-column prop="callNumber" label="手机" width="130"></el-table-column>
                    <el-table-column label="操作" fixed="right">
                        <template slot-scope="scope">
                            <el-button @click="Choice(scope.row)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block" style="margin-bottom: 20px; margin-top: 5px">
                    <el-pagination
                        background
                        style="float: right"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page.pageNum"
                        :page-sizes="[10, 20, 30, 50]"
                        :page-size="page.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="10"
                    >
                    </el-pagination>
                </div>
            </el-dialog>
        </div>
        <!-- 添加仓库弹框 -->
        <el-dialog title="添加仓库" :visible.sync="dialogVisible" width="35%" :before-close="handleClose" class="adframe">
            <el-form ref="form" :model="adi">
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>商品编码</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入商品编码" v-model="adi.number"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>商品名称</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入商品名称" v-model="adi.name"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>英文名称</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入英文名称" v-model="adi.ename"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>计量单位</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入单位" v-model="adi.unit"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>商品规格</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入商品规格" v-model="adi.spec"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>库存数量</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入库存数量" v-model="adi.stock"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>商品种类</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入商品种类" v-model="adi.kind"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>商品归属</span>
                    <div style="float: left; width: 60%">
                        <el-input v-model="adi.belongName" placeholder="请输入归属仓储客户" :disabled="true">
                            <el-button slot="append" @click="dialogTableVisible = true">选择</el-button>
                        </el-input>
                    </div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>商品类别</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入货品类别" v-model="adi.newCategory"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>商品大类</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入货品大类" v-model="adi.broad"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>商品小类</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入货品小类" v-model="adi.sub"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>所属仓库</span>
                    <div style="float: left; width: 60%">
                        <el-select v-model="adi.wId" placeholder="请选择仓库" style="margin-top: 10px">
                            <el-option v-for="item in ck" :key="item.wId" :label="item.name" :value="item.wId"></el-option>
                        </el-select>
                    </div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span style="float: left; margin-top: 5px; margin-right: 5px">所属货架</span>
                    <div style="float: left; width: 60%">
                        <el-select v-model="adi.wId" placeholder="请选择货架" style="margin-top: 10px">
                            <el-option v-for="item in ck" :key="item.wId" :label="item.name" :value="item.wId"></el-option>
                        </el-select>
                    </div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>安全库存</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入安全类别" v-model="adi.warnStock"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>有效期(天)</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入有效期-天" v-model="adi.validity"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>商品描述全</span>
                    <div style="float: left; width: 60%">
                        <el-input placeholder="请输入货品描述全" v-model="adi.description"></el-input>
                    </div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>商品价格单价</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入货品价格单价" v-model="adi.price"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>新类别</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入新类别" v-model="adi.newCategory"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>条形码</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入条形码" v-model="adi.code"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>打包规格</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入打包规格" v-model="adi.packs"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>备注1</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入备注" v-model="adi.remark"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>备注2</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入备注" v-model="adi.remark2"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>图片1</span>
                    <div style="float: left">
                        <el-upload
                            ref="upload"
                            :headers="headers"
                            action="http://47.100.8.204:8092/common/upload"
                            :on-preview="handlePreviewt"
                            :on-success="handlePreviewt"
                            :on-remove="handleRemove"
                            :file-list="fileList"
                            :auto-upload="false"
                        >
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <el-button style="float: right" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>图片2</span>
                    <div style="float: left">
                        <el-upload
                            ref="uploads"
                            :headers="headers"
                            action="http://47.100.8.204:8092/common/upload"
                            :on-preview="handlePreview"
                            :on-success="handlePreview"
                            :on-remove="handleRemove"
                            :file-list="fileListt"
                            :auto-upload="false"
                        >
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <el-button style="float: right" size="small" type="success" @click="submitUploads">上传到服务器</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>sku</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入sku" v-model="adi.sku"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>品牌</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入品牌" v-model="adi.brand"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>出库选项</span>
                    <div style="float: left; width: 60%">
                        <el-select v-model="adi.options" placeholder="请选择出库选项" style="margin-top: 10px">
                            <el-option label="出库优先" value="0"></el-option>
                            <el-option label="有效期" value="1"></el-option>
                        </el-select>
                    </div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>有效期类型</span>
                    <div style="float: left; width: 60%">
                        <el-select v-model="adi.valid" placeholder="请选择有效期类型" style="margin-top: 10px">
                            <el-option label="有效期产品" value="0"></el-option>
                            <el-option label="无效期产品" value="1"></el-option>
                        </el-select>
                    </div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>来源分类</span>
                    <div style="float: left; width: 60%">
                        <el-select v-model="adi.line" placeholder="请选择来源分类" style="margin-top: 10px">
                            <el-option label="线上" value="0"></el-option>
                            <el-option label="线下" value="1"></el-option>
                        </el-select>
                    </div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>产品包装规格</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入产品包装规格" v-model="adi.pack"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>包装单位</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入包装单位" v-model="adi.packUnit"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>易碎标志</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入易碎标志" v-model="adi.fragile"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>是否为液体</span>
                    <div style="float: left">
                        <el-switch v-model="adi.liquid" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
                    </div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>是否为粉末</span>
                    <div style="float: left">
                        <el-switch v-model="adi.powder" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
                    </div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>是否超重</span>
                    <div style="float: left">
                        <el-switch v-model="adi.overweight" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
                    </div>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dw">取 消</el-button>
                <el-button type="primary" @click="conVarSum">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listmain, maindel, listWarehouse, listcustomer, mainadd, mainput } from '../../api/user.js';
export default {
    data() {
        return {
            // 图片
            value: true,
            // 添加框
            dialogVisible: false,
            dialogTableVisible: false,
            ck: [],
            // 表头隐藏
            Head: true,
            tableData: [],
            tableDatas: [],
            fileList: [],
            fileListt: [],
            // 分页
            page: {
                pageSize: 10,
                pageNum: 1
            },
            // 添加输入框
            adi: {
                belongName: null,
                name: null,
                number: null,
                pId: null
            },
            total: null
        };
    },
    methods: {
        // 图片
        submitUpload() {
            this.$refs.upload.submit();
        },

        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            // console.log(file,111);
            this.adi.pic2 = file.url;
        },
        submitUploads() {
            this.$refs.uploads.submit();
        },
        handlePreviewt(file) {
            console.log(file);
            this.adi.pic1 = file.url;
        },
        // 重置按钮
        Reset() {
            this.Rean();
            this.adi.name = undefined;
            this.adi.number = undefined;
            this.adi.belongName = undefined;
            this.adi.wId = undefined;
        },
        // 表头显示
        Display() {
            this.Head = !this.Head;
        },
        // 表头样式设置
        headClass() {
            return 'text-align: center;background:#F8F8F9;color:#515A6D;';
        },
        // 表格样式设置
        rowClass() {
            return 'text-align: center;';
        },
        // 分页点击
        indexMethod(index) {
            return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
        },
        // 分页
        handleSizeChange(val) {
            this.page.pageSize = Number(val);
            console.log(`每页 ${val} 条`);
            this.Rean();
        },
        handleCurrentChange(val) {
            this.page.pageNum = Number(val);
            console.log(`当前页: ${val}`);
            this.Rean();
        },
        // 添加内框
        Choice(index) {
            listcustomer(this.page).then((res) => {
                this.tableDatas = res.rows;
                console.log(res);
                this.adi.belongName = index.name;
                this.adi.belong = index.cId;
                this.dialogTableVisible = false;
            });
            // this.adi.belongName = index.name;
            // this.adi.belong = index.cId;
        },
        // 渲染
        Rean() {
            listmain(this.page).then((res) => {
                this.tableData = res.rows;
                this.total = res.total;
                console.log(res);
            });
        },
        rean() {
            listWarehouse(this.wId).then((res) => {
                this.ck = res.rows;
                console.log(res.rows);
            });
        },
        // 搜索
        serch() {
            listmain(this.adi).then((res) => {
                console.log(res);
                this.tableData = res.rows;
            });
        },
        // 删除
        Deldeli(index) {
            console.log(index);
            this.pId = index;
            maindel(this.pId).then((res) => {
                console.log(res);
                this.Rean();
            });
        },
        resect() {
            // 地址
            (this.adi.address = null),
                // 类别
                (this.adi.category = null),
                // 条码
                (this.adi.code = null),
                // 联系人
                (this.adi.contacts = null),
                // 名称
                (this.adi.name = null),
                // 手机号码
                (this.adi.phone = null);
        },
        //   添加弹框
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },
        dw() {
            this.dialogVisible = false;
        },
        //新增按钮
        addLists() {
            this.resect();
            this.dialogVisible = true;
            this.Dialogtitle = '添加仓库';
            this.conVar = 0;
        },
        //修改按钮
        update(k) {
            this.Dialogtitle = '修改仓库';
            this.conVar = 1;
            this.adi = k;
            this.dialogVisible = true;
        },
        //弹框提交
        conVarSum() {
            this.dialogVisible = false;
            if (this.conVar == 0) {
                // console.log("添加");
                mainadd(this.adi).then((res) => {
                    console.log(res);
                    this.Rean();
                    this.$message.success('添加成功');
                });
            } else {
                mainput(this.adi).then((res) => {
                    console.log(res);
                    this.Rean();
                    this.$message.success('修改成功');
                });
            }
        }
    },
    mounted() {
        this.Rean();
        this.rean();
        this.Choice();
    },
    computed: {
        headers() {
            return {
                Authorization: localStorage.getItem('token')
            };
        }
    }
};
</script>

<style scoped>
.Head {
    height: 50px;
}
/* 客户类别 */
.Cusgory {
    height: 100%;
    float: left;
    margin-right: 10px;
}
.Cusgory span {
    display: block;
    height: 100%;
    line-height: 50px;
    font-weight: 800;
    color: #606266;
    float: left;
}
/* 客户名称 */
.Cusname {
    height: 100%;
    float: left;
    margin-right: 10px;
}
.Cusname span {
    display: block;
    height: 100%;
    line-height: 50px;
    font-weight: 800;
    color: #606266;
    float: left;
}
/* 搜素，重置按钮 */
.But {
    height: 100%;
    /* float: left; */
}
.But button {
    margin-top: 10px;
}
/deep/.el-upload {
    border: none;
    height: 35px;
    width: 200px;
}
/deep/.el-upload button {
    float: left;
}
/* /deep/.el-dialog{
    height: 550vh;
} */
.adframe span {
    float: left;
    margin-top: 5px;
    margin-right: 5px;
    text-align: right;
    width: 30%;
}
/deep/.el-upload {
    width: 100px;
}
</style>